<template>
    <div style="height:100%;width:100%" :id="id"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name:"chart",
    props:{
        id: {
            type: String,
            default: "demo",
        },
        options:{
            type:Object,
            default:{
                title: { text: "在Vue中使用echarts"},
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                },
                yAxis: {},
                series: [
                {
                    name: "销量",
                    type: "bar",
                    data: [5, 20, 36, 10, 10, 20],
                },
            ],
        }
        }
    },
    mounted() {
        this.drawLine();
    },
    methods: {
        drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById(this.id));
        // 绘制图表
        myChart.setOption(this.options);
        },
    },
}
</script>

<style>
</style>